Ext.ux.IFrameComponent = Ext.extend(Ext.BoxComponent, {
     onRender : function(ct, position){
          this.el = ct.createChild({tag: 'iframe', id: 'iframe-'+ this.id, frameBorder: 0, src: this.url, width : '100%', height :'100%'});
     }
});

Ext.onReady(function() {
	
    

    var viewport = new Ext.Viewport({
        layout:'fit',
        items:[{
            xtype: 'grouptabpanel',
    		tabWidth: 150,
    		activeGroup: 0,    		
    		items: [{
                expanded: true,
                items: [{
                    title: 'ExtJs DynTran',
                    style: 'padding: 10px;',
                    items: [ new Ext.ux.IFrameComponent({ id: 'main', url: 'http://code.google.com/p/extjsdyntran/' }) ]
                }, {
                    title: 'Changes',
                    style: 'padding: 10px;',
                    items: [ new Ext.ux.IFrameComponent({ id: 'changes', url: 'http://code.google.com/p/extjsdyntran/wiki/Changes' }) ]
                }, {
                    title: 'About',
                    style: 'padding: 10px;',
                    items: [ new Ext.ux.IFrameComponent({ id: 'about', url: 'http://code.google.com/p/extjsdyntran/wiki/FAQ' }) ]
                }]
            }, {
            	expanded: false,
                items: [ {
                    title: 'Editor',
                    style: 'padding: 10px;',
                	items : new Ext.ux.IFrameComponent({ id: 'editor', url: '../editor/' }) }]
            },{
    			mainItem: 0,
    			items: [{
    				title: 'Demos',
                    layout: 'fit',
                    style: 'padding: 10px;',
                    html : 'This demoes uses server side JAVA/PHP support'
    			}, {
    				title: 'Forms demo',
                    style: 'padding: 10px;',
					layout: 'fit',
					items: [ new Ext.ux.IFrameComponent({ id: 'example1', url: '../examples/form/dynamic.html' }) ]
    			}, {
    				title: 'Custom Properties',
                    style: 'padding: 10px;',
                    items: [ new Ext.ux.IFrameComponent({ id: 'example2', url: '../examples/form/dynamic2.html' }) ]
    			}, {
    				title: 'Grid demo',
                    style: 'padding: 10px;',
                    items: [ new Ext.ux.IFrameComponent({ id: 'example3', url: '../examples/grid/' }) ]
    			}, {
    				title: 'MessageBox demo',
                    style: 'padding: 10px;',
                    items: [ new Ext.ux.IFrameComponent({ id: 'example4', url: '../examples/msgbox.html' }) ]		
    			}, {
    				title: 'Login demo',
                    style: 'padding: 10px;',
                    items: [ new Ext.ux.IFrameComponent({ id: 'example5', url: '../examples/logindialog/' }) ]		
    			}, {
    				title: 'Web Desktop Demo',
                    style: 'padding: 10px;',
                    items: [ new Ext.ux.IFrameComponent({ id: 'example6', url: '../examples/desktop/desktop.html' }) ]		
    			}]
            },{
    			mainItem: 0,
    			items: [{
    				title: 'Demos Local',
                    layout: 'fit',
                    style: 'padding: 10px;',
                    html : 'This demoes does not need server side support. <br>All translations are done directly with help of Google Translation Service.<br>For more info visit project page.'
    			}, {
    				title: 'Form demo',
                    style: 'padding: 10px;',
					layout: 'fit',
					items: [ new Ext.ux.IFrameComponent({ id: 'example7', url: '../examples/form/ClientOnly.html' }) ]
    			}, {
    				title: 'MessageBox demo',
                    style: 'padding: 10px;',
                    items: [ new Ext.ux.IFrameComponent({ id: 'example8', url: '../examples/msgboxClient.html' }) ]		
    			}, {
    				title: 'Login demo',
                    style: 'padding: 10px;',
                    items: [ new Ext.ux.IFrameComponent({ id: 'example9', url: '../examples/logindialog/indexClientOnly.html' }) ]		
    			}, {
    				title: 'Web Desktop Demo',
                    style: 'padding: 10px;',
                    items: [ new Ext.ux.IFrameComponent({ id: 'example10', url: '../examples/desktop/desktopClient.html' }) ]		
    			}]
            }]
		}]
    });
});
